<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <header>
        <a href="#" class="bill">
            <i class="iconfont icon-dingdanzhuangtai"></i>
            账单
        </a>
        <ul class="func-list">
            <li>
                <a href="#">
                    <i class="iconfont icon-haoyouliebiao"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="iconfont icon-sousuo"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="iconfont icon-jiahao"></i>
                </a>
            </li>
        </ul>
    </header>

    <main>
        <ul class="top-list">
            <li>
                <a href="#">
                    <i class="iconfont icon-saoyisao"></i>
                    <span>扫一扫</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="iconfont icon-fukuan"></i>
                    <span>付款</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="iconfont icon-qiabao"></i>
                    <span>卡券</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/xiuyixiu.png" alt="">
                    <span>咻一咻</span>
                </a>
            </li>
        </ul>

        <ul class="main-nav">
            <li>
                <a href="#">
                    <img src="./images/index/index1/img1.png" alt="">
                    <span>转账</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/index/index1/img2.png" alt="">
                    <span>红包</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/index/index1/img3.png" alt="">
                    <span>余额宝</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/index/index1/img4.png" alt="">
                    <span>手机充值</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/index/index1/img5.png" alt="">
                    <span>信用卡还款</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/index/index1/img6.png" alt="">
                    <span>芝麻信用</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/index/index1/img7.png" alt="">
                    <span>滴滴出行</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/index/index1/img8.png" alt="">
                    <span>淘票票</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/index/index1/img9.png" alt="">
                    <span>蚂蚁聚宝</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/index/index1/img10.png" alt="">
                    <span>外卖</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/index/index1/img11.png" alt="">
                    <span>天猫</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/index/index1/img12.png" alt="">
                    <span>生活缴费</span>
                </a>
            </li>
        </ul>

        <div class="banner">
            <img src="./images/index/index1/banner.png" alt="">
        </div>

        <ul class="main-nav">
            <li>
                <a href="#">
                    <img src="./images/index/index2/1.png" alt="">
                    <span>机票火车票</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/index/index2/2.png" alt="">
                    <span>服务窗</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/index/index2/3.png" alt="">
                    <span>天猫超市</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/index/index2/4.png" alt="">
                    <span>记账本</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/index/index2/5.png" alt="">
                    <span>股票</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/index/index2/6.png" alt="">
                    <span>我的快递</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/index/index2/7.png" alt="">
                    <span>我的客服</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/index/index2/8.png" alt="">
                    <span>城市服务</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/index/index2/9.png" alt="">
                    <span>亲情圈</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/index/index2/10.png" alt="">
                    <span>淘宝</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/index/index2/11.png" alt="">
                    <span>加油服务</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/index/index2/12.png" alt="">
                    <span>收款</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/index/index2/13.png" alt="">
                    <span>爱心捐赠</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/index/index2/14.png" alt="">
                    <span>超市惠</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/index/index2/15.png" alt="">
                    <span>阿里旅游</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/index/index2/16.png" alt="">
                    <span>世界那么大</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/index/index2/17.png" alt="">
                    <span>汇率换算</span>
                </a>
            </li>
            <li class="more">
                <a href="#">
                    <img src="./images/index/index2/18.png" alt="">
                </a>
            </li>
        </ul>
    </main>

    <footer>
        <ul class="foot-nav">
            <li class="foot-nav-on">
                <a href="#">
                    <i class="iconfont icon-zhifubao"></i>
                    <span>支付宝</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/wom.png" alt="">
                    <span>口碑</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/friend.png" alt="">
                    <span>朋友</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="iconfont icon-shouzhimingxicaifuhongbaoyue"></i>
                    <span>我的</span>
                </a>
            </li>
        </ul>
    </footer>

    <script src="./js/flexible.js"></script>
</body>
</html>